<!DOCTYPE html>
<html class="x-admin-sm">

	<head>
		<meta charset="UTF-8">
		<title>课程显示页面</title>
		<meta name="renderer" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
		<link rel="stylesheet" href="./css/font.css">
		<link rel="stylesheet" href="./css/xadmin.css">
		<link rel="stylesheet" href="css/global.css" />
		<script src="./lib/layui/layui.js" charset="utf-8"></script>
		<script type="text/javascript" src="./js/xadmin.js"></script>
		<script src="js/commons.js"></script>
	</head>

	<body>
		<div class="x-nav">
			<span class="layui-breadcrumb">
                <a href="">首页</a>
                <a href="">演示</a>
                <a><cite>导航元素</cite></a>
            </span>
			<a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right" onclick="location.reload()" title="刷新">
				<i class="layui-icon layui-icon-refresh" style="line-height:30px"></i>
			</a>
		</div>
		<div class="layui-fluid">
			<div class="layui-row layui-col-space15">
				<div class="layui-col-md12" id="saveTr">
					<div class="layui-card">
						<div class="layui-card-body ">
							<form class="layui-form layui-col-space5">
								<div class="layui-input-inline layui-show-xs-block">
									<input type="text" id="courseName" placeholder="课程名称" autocomplete="off" class="layui-input">
								</div>
								<div class="layui-input-inline layui-show-xs-block">
									<input class="layui-input" placeholder="创建时间" id="start">
								</div>
								<div class="layui-input-inline layui-show-xs-block">
									<input class="layui-input" placeholder="结束时间" id="end">
								</div>
								<div class="layui-input-inline layui-show-xs-block">
									<select id="isAvaliable">
										<option value="-1">状态</option>
										<option value="1">上架</option>
										<option value="2">下架</option>
									</select>
								</div>
								<div class="layui-input-inline layui-show-xs-block">
									<select id="checkId">
									</select>
								</div>
								<div class="layui-input-inline layui-show-xs-block">
									<button class="layui-btn" type="button" lay-filter="sreach" @click="btn">
                                        <i class="layui-icon">&#xe615;</i>
									</button>
								</div>
								<div class="layui-input-inline layui-show-xs-block">
									<button class="layui-btn" type="button" lay-filter="sreach" id="empty">
                                        <i class="layui-icon">清空</i>
									</button>
								</div>
							</form>
						</div>
						<div class="layui-card-header">
							<button class="layui-btn" @click="cread()">
                                <i class="layui-icon"></i>创建课程</button>
						</div>
						<div class="layui-card-body">
							<table class="layui-table layui-form">
								<thead>
									<tr>
										<th>课程名称</th>
										<th>状态</th>
										<th>专业</th>
										<th>原价</th>
										<th>优惠价</th>
										<th>课时</th>
										<th>销售量</th>
										<th>浏览量</th>
										<th>创建时间</th>
										<th>有效结束时间</th>
										<th>操作</th>
									</tr>
								</thead>
								<tbody>
									<tr v-for="(cour,index) in temporary">
										<td style="display:none;">{{ cour.courseId }}</td>
										<td>{{ cour.courseName }}</td>
										<td v-if="cour.isAvaliable==1">上架</td>
										<td v-if="cour.isAvaliable==2">下架</td>
										<td>{{ cour.name }}</td>
										<td>{{ cour.sourcePrice }}</td>
										<td>{{ cour.currentPrice }}</td>
										<td>{{ cour.lessionNum }}</td>
										<td>{{ cour.pageBuycount }}</td>
										<td>{{ cour.pageViewcount }}</td>
										<td>{{ cour.addTime }}</td>
										<td>{{ cour.endTime }}</td>
										<td class="td-manage">
											<a title="章节管理" @click="editSubject(cour.courseId)" href="javascript:;">
												<i class="layui-icon">&#xe63c;</i>
											</a>
											<a title="删除" id="del" @click="del(cour.courseId)" href="javascript:;">
												<i class="layui-icon">&#xe640;</i>
											</a>
											<a title="编辑" @click="edit(cour.courseId)" href="javascript:;">
												<i class="layui-icon">&#xe642;</i>
											</a>
										</td>
									</tr>
								</tbody>
							</table>
							<div class="paging" id="pageHelper">
								<a href="#" @click="first" title="">首页</a>
								<a id="backpage" href="#" @click="last" title="">&lt;</a>
								<a href="#" @click="tiao(t)" title="" v-for="t in totalPage">{{ t }}</a>
								<a id="nextpage" href="#" @click="next" title="">&gt;</a>
								<a href="#" @click="end" title="">尾页</a>
								<a id="nextpage" href="#" title="">共{{ totalPage }}</a>
								<div class="clear"></div>
							</div>
						</div>
					</div>
				</div>
			</div>

			<script type="text/javascript" src="./js/jquery.min.js"></script>
			<script src="./js/vue.min.js"></script>
			<script type="text/javascript" src="js/vue.js"></script>
			<script src="js/axios.min.js"></script>
			<script type="text/javascript" src="js/jquery.cookie.js"></script>
			<script>
				layui.use(['laydate', 'form', 'laypage'],
					function() {
						var laydate = layui.laydate,
							form = layui.form,
							laypage = layui.laypage;

						//清空
						$(document).on('click', '#empty', function() {
							$("#courseName").val("");
							$("#start").val("");
							$("#end").val("");
							$('#checkId').val('0');
							// 当前的select的id 
							$('#isAvaliable').val('-1');
							//更新全部
							layui.form.render();
						});

						$.ajax({
							type: "get",
							url: "http://localhost:9095/admin/sysSubject/getSubject",
							async: true,
							headers: {
								"token2": $.cookie("token2")
							},
							success: function(massage) {
								var msg = massage.data;
								if(msg != undefined && msg != null && msg != "") {
									var html = "";
									for(var i = 0; i < msg.length; i++) {
										if(i == 0) {
											html += "<option value='0'>专业</option>"
										} else {
											html += "<option value='" + msg[i].subjectId + "'>" + msg[i].subjectName + "</option>"
										}
									}
									$("#checkId").append(html);
									form.render('select');
								}
							}
						});

						//执行一个laydate实例
						laydate.render({
							elem: '#start',
							type: 'date',
							format: 'yyyy-MM-dd',
							done: function(value, date, startDate) {}
						});

						//执行一个laydate实例
						laydate.render({
							elem: '#end',
							type: 'date',
							format: 'yyyy-MM-dd',
							done: function(value, date, endDate) {}
						});

					});
			</script>

			<script>
				const saveTr = new Vue({
					el: "#saveTr",
					data: {
						course: [],
						temporary: [],
						page: 1, //当前页
						totalPage: 0, //总页数
						pageArr: [] //总数据
					},
					methods: {
						loading(){
							axios.defaults.headers.common["token2"] = $.cookie("token2");
							let _this = this;
							axios.post("http://localhost:9095/admin/eduCourse/AllEduCourse").then(function(response) {
								_this.course = response.data.data;
								_this.temporary = _this.course;
								_this.totalPage = Math.ceil(_this.course.length / 10)
								_this.first();
							});
						},
						//跳转至章节管理页面
						editSubject(obj) {
							$.cookie("id", obj);
							xadmin.open('章节管理', 'course_kpoint.html');
						},
						//是否删除数据
						del(obj) {
							axios.defaults.headers.common["token2"] = $.cookie("token2");
							var par = confirm("确定删除吗？");
							if(par) {
								//发异步删除数据
								axios.post("http://localhost:9095/admin/eduCourse/deleteCourse", {
									"courseId": obj
								}).then(function(response) {
									layer.msg('已删除!', {
										icon: 1,
										time: 1000
									});
									location.reload();
								});
							}
						},
						//跳转至修改页面
						edit(obj) {
							$.cookie("courseId", obj);
							location.href = "edit_course.html";
						},
						//跳转至新增课程页面
						cread() {
							location.href = "course_cread.html";
						},
						//点击事件，（模糊查询）
						btn() {
							axios.defaults.headers.common["token2"] = $.cookie("token2");
							let _this = this;
							var postData = new URLSearchParams();
							postData.append("courseName", $("#courseName").val());
							if($("#start").val() != null) {
								postData.append("addTime", $("#start").val());
							}
							if($("#end").val() != null) {
								postData.append("endTime", $("#end").val());
							}
							if($("#checkId option:checked").val() != 0) {
								postData.append("subjectLink", $("#checkId option:checked").val());
							}
							postData.append("isAvaliable", $("#isAvaliable option:checked").val());
							axios({
								method: "post",
								url: "http://localhost:9095/admin/eduCourse/AllEduCourse",
								headers: {
									'Content-Type': 'application/x-www-form-urlencoded'
								},
								params: postData
							}).then(function(response) {
								_this.course = response.data.data;
								_this.temporary = _this.course;
								_this.totalPage = Math.ceil(_this.course.length / 10)
								_this.first();
							});
						},
						//首页
						first: function() {
							this.page = 1;
							this.temporary = pageHelp(this.course, 10, this.page);
						},
						//上一页
						last: function() {
							if (this.page == 1){
								layer.msg('当前已是首页!', {
										icon: 1,
										time: 1000
									});
							} else {
								this.page = this.page-1;
								this.temporary = pageHelp(this.course, 10, this.page);
							}
						},
						//下一页
						next: function() {
							if (this.page==this.totalPage){
								layer.msg('当前已是尾页!', {
										icon: 1,
										time: 1000
									});
							} else {
								this.page = this.page+1;
								this.temporary = pageHelp(this.course, 10, this.page);
							}
						},
						//末页
						end: function() {
							this.page = this.totalPage;
							this.temporary = pageHelp(this.course, 10, this.totalPage);
						},
						tiao: function(obj){
							this.page = obj;
							this.temporary = pageHelp(this.course, 10, obj);
						}
					},
					//页面加载事件
					created() {
						this.loading();
					}
				})
			</script>

	</body>

</html>